<template>
  <table class="publish-table">
    <tbody>
      <tr v-for="(file, index) in uploadLocalFileListFormat">
        <td class="filename">
          <a-tooltip placement="topLeft">
            <template #title>
              {{ file.name }}
            </template>
            {{ file.name }}
          </a-tooltip>
        </td>
        <td class="progress">
          <a-progress :percent="file.percent" :status="file.status" />
        </td>
        <td class="handle">
          <a-button
            type="link"
            @click="onAbort(index)"
            v-if="
              file.percent !== 100 &&
              uploadLocalFileList?.[index]?.status === 'uploading'
            "
            style="padding: 4px 6px"
          >
            取消
          </a-button>
          <a-button
            type="link"
            v-if="file?.status === 'exception'"
            style="padding: 4px 6px"
            @click="onReUpload(index)"
          >
            重新上传
          </a-button>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script setup>
import { computed } from 'vue'
import { useUploadLocalFileList, useUploadLocalRef } from './provide-context.js'
/**
 * 事件
 */
let emit = defineEmits(['invalid'])
/**
 * 全局
 */
let uploadLocalFileList = useUploadLocalFileList()
let uploadLocalRef = useUploadLocalRef()
// console.log(uploadLocalRef)

//当前上传数据
let uploadLocalFileListFormat = computed(() => {
  return uploadLocalFileList.value.map(file => {
    return {
      name: file.name,
      status:
        file.status === 'error' ||
        (file.status === 'done' && !file?.response?.success)
          ? 'exception'
          : file.percent === 100
            ? null
            : 'active',
      id: file.uuid,
      percent:
        file.status === 'uploading' && file.percent === 100
          ? 0
          : parseInt(file.percent),
    }
  })
})

function onAbort(index) {
  uploadLocalRef.value.upload.abort(uploadLocalFileList.value[index])
  uploadLocalFileList.value.splice(index, 1)
  // uploadLocalFileList.value[index].status = 'error'
}
function onReUpload(index) {
  // uploadLocalFileList.value.splice(index, 1)
  document.getElementById('upload-local').click()
}
</script>
<style lang="less" scoped>
.publish-table {
  width: 100%;
  td {
    padding: 0 10px;
  }
  .filename {
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .progress {
    min-width: 118px;
    :deep(.ant-progress) {
      margin-bottom: 0;
    }
  }
  .handle {
    white-space: nowrap;
  }
}
</style>
